<template>
	<div class="content">
		<div class="contanier">
			<div class="div1">
				<div class="div1item div11">我的得分</div>
				<div class="div1item div11">正确率</div>
				<div class="div1item div12"><i class="i12">{{num1}}</i><i class="i14">/{{num2}}</i></div>
				<div class="div1item div12"><i class="i13">{{correctpercent}}%</i><i class="i14">{{num3}}/{{totalqnum}}</i></div>
				<div class="div1item div13"><i class="el-icon-s-flag icon1"></i><i class="i15">{{num5.toFixed(2)}}</i><i
						class="i16">（难度）</i></div>
				<div class="div1item div13"><i class="el-icon-s-data icon2"></i><i class="i15">{{num6.toFixed(2)}}</i><i
						class="i16">（平均分）</i></div>
			</div>
			<div class="div2">
				<div class="div22">得分分布图</div>
				<div ref="chart" class="div23"></div>
			</div>
			<div class="div3">
				<div>题型概况</div>	
				<p v-for="(item,index) in qlist"><span>{{item.name}}</span><span>共{{item.errorCount+item.rightCount}}道题，答对{{item.rightCount}}道，正确率{{item.rightLevel}}%</span></p>
			</div>
			<div class="savebtn">
				<el-button type="primary" class="infobtn" @click="toshowexam">查看考试详情</el-button>
			</div>
		</div>
		
		<nav-footer style="position: absolute;bottom: 0;"></nav-footer>
	</div>
</template>
<script>
	import NavFooter from '../../components/footer.vue'
	import echarts from 'echarts'
	export default {
		components: { NavFooter, },
		data() {
			return {
				recordId:this.$route.query.recordId,
				num1:0,
				num2:0,
				num3:0,
				num4:0,
				num5:0,
				num6:0,
				qlist:[]
			};
		},
		computed:{
			totalqnum(){
				return this.num3+this.num4
			},
			correctpercent(){
				if(this.num3>0 && this.num4>0){
					return (100*this.num3/(this.num3+this.num4)).toFixed(1)
				}else{
					return 0
				}
				
			},
		},
		mounted() {
			this.getbaseinfo()
			this.renderChart()
		},
		methods: {
			renderChart() {
				const chartDom = this.$refs.chart
				const chart = echarts.init(chartDom)

				// 配置图表数据和样式
				const options = {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['40', '50', '60', '70', '80', '90', '100']
					},
					grid:{
					    top:'15',
					    left:'50',
					    right:'30',
					    bottom:'35'
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [0, 2, 4, 12, 50, 30, 6],
						type: 'line',
						areaStyle: {},
						smooth: true,
						symbol:'none',
					}]
				};

				// 渲染图表
				chart.setOption(options)
			},
			getbaseinfo() {
				this.$api.Usercenter.Getexamres(this.recordId).then(res => {
					console.log(res.data)
					this.num1=res.data.score
					this.num2=res.data.totalScore
					this.num3=res.data.correctNumber
					this.num4=res.data.inCorrectNumber
					this.num5=res.data.averageLevel
					this.num6=res.data.averageScore
					this.qlist=res.data.answer
				})
			},
			toshowexam(){
				this.$router.push({
					name: 'ExamPapersShow',
					query: {id:this.$route.query.recordId,userId:this.$route.query.registId,examinationId:this.$route.query.examId}
				})
			}
		},
	};
</script>
<style lang="less" scoped>
	.content {
		width: 100%;
		.savebtn{
			display:flex;
			justify-content:center;
			align-items:center;
			width:100%;
			height:80px;
			.infobtn{
				background-color:#134B9F;
				border:none;
			}
		}
		.contanier {
			width: 1200px;
			min-height: 500px;
			margin: 30px auto;
			overflow: hidden;
			background-color: #f4fafe;

			.div1 {
				width: 735px;
				float: left;
				min-height: 100px;
				margin-right: 15px;
				padding: 25px 20px 15px 30px;
				box-sizing: border-box;
				background-color: #fff;

				&:after {
					content: '';
					clear: both;
				}

				.div1item {
					width: 332px;
					min-height: 50px;
					float: left;
					margin-bottom: 10px;
					margin-right: 10px;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: baseline;
					color: #555;
					padding-left: 40px;
				}

				.div11 {
					font-size: 21px;
					font-weight: bold;
				}

				.div12 {
					height: 70px;

					.i12 {
						font-size: 32px;
						color: #409eff;
						font-weight: bold;
						margin-right: 4px;
					}

					.i13 {
						font-size: 32px;
						color: #f59a23;
						font-weight: bold;
						margin-right: 10px;
					}

					.i14 {
						font-size: 18px;
						color: #444;
					}
				}

				.div13 {
					align-items: center;

					.icon1 {
						color: #a3a2ff;
						font-size: 30px;
						margin-right: 6px;
					}

					.icon2 {
						color: #ffd16c;
						font-size: 30px;
						margin-right: 6px;
					}

					.i15 {
						font-size: 17px;
						font-weight: bold;
						color: #555;
					}

					.i16 {
						font-size: 17px;
						color: #666;
					}
				}
			}

			.div2 {
				width: 450px;
				float: left;
				background-color: #fff;
				height: 240px;
				.div22{
					font-size: 21px;
					font-weight: bold;
					color:#555;
					width:100%;
					height:50px;
					line-height: 50px;
					padding-left: 20px;
				}
				.div23{
					width:100%;
					height:190px;
					
				}
			}

			.div3 {
				width: 100%;
				float: left;
				background-color: #fff;
				margin-top: 15px;
				min-height: 100px;
				padding:20px 70px;
				div{
					font-size: 21px;
					font-weight: bold;
					color:#555;
				}
				p{
					width:100%;
					height:40px;
					display: flex;
					flex-direction: row;
					align-items:center;
					justify-content:space-between;
					border-bottom:1px solid #ccc;
					color:#666;
					font-size:16px;
					span:first-child{
						font-weight:bold;
					}
				}
			}

			&:after {
				content: '';
				clear: both;
			}
		}
	}
</style>
